<template>
  <!-- state.tabActive  0 1 2 -->
  <!-- <view :class="['wrap', state.tabActive == 1 ? 'active' : '']"> -->
  <view class="wrap">
    <view class="header">
      <view class="bg"></view>
      <view class="info">
        <img
          class="left"
          v-if="state.userInfo.gender == '女性'"
          src="@/static/image/hmm/woman.png"
          alt=""
        />
        <img class="left" v-else src="@/static/image/hmm/man.png" alt="" />
        <view class="right">
          <view class="top">
            <view class="infos">
              <text class="name">{{ state.userInfo.patName }}</text>
              <text class="sex">{{ state.userInfo.gender }}</text>
              <text class="age">{{ state.userInfo.age }}岁</text>
            </view>
            <view class="more" @tap="moreFun">
              <text class="more-text">更多信息</text>
              <text type="" class="iconfont icon-zhankaijiantou1 img"></text>
            </view>
          </view>
          <view class="idCard">
            <text class="cardName">身份证</text>
            <text class="border"></text>
            <text class="num">{{ state.userInfo.idNo }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="tabWrap">
        <img v-if="state.tabActive == 0" class="bg" src="@/static/image/hmm/7.png" alt="" />
        <img v-if="state.tabActive == 1" class="bg" src="@/static/image/hmm/8.png" alt="" />
        <img v-if="state.tabActive == 2" class="bg" src="@/static/image/hmm/9.png" alt="" />
        <view class="tab cf">
          <view
            :class="['tabItem', state.tabActive == index ? 'on' : '']"
            v-for="(item, index) in tabList"
            :key="index"
            @tap="changeTab(index)"
          >
            <view class="name">{{ item.name }}</view>
            <view class="border"></view>
          </view>
        </view>
      </view>
      <view class="tabActiveOne" v-if="state.tabActive == 0">
        <view v-if="state.estimateList && state.estimateList.length > 0">
          <view v-for="(item, index) of state.estimateList" :key="index">
            <view class="cancerWrap">
              <!-- 默认是低风险  middle是中风险 hight是高风险-->
              <view
                :class="[
                  'cancer',
                  item.riskLevel == 'A'
                    ? 'confirm'
                    : item.riskLevel == 'B'
                    ? 'hight'
                    : item.riskLevel == 'C1'
                    ? 'middle'
                    : item.riskLevel == 'O'
                    ? 'low'
                    : ''
                ]"
              >
                <text
                  type=""
                  class="iconfont icon-fengxian1 bg"
                  :style="{
                    color:
                      item.riskLevel == 'A'
                        ? '#615DE9'
                        : item.riskLevel == 'B'
                        ? '#FF503D'
                        : item.riskLevel == 'C1'
                        ? '#FF813C'
                        : item.riskLevel == 'O'
                        ? '#5C8EFF'
                        : '#0CB67C'
                  }"
                ></text>
                <view class="cancerName">
                  <text class="name">{{ item.labelName }}</text>
                  <text class="state"
                    >（{{
                      item.riskLevel == 'A'
                        ? '确诊'
                        : item.riskLevel == 'B'
                        ? '高风险'
                        : item.riskLevel == 'C1'
                        ? '中风险'
                        : item.riskLevel == 'O'
                        ? '极低风险'
                        : '低风险'
                    }}）</text
                  >
                </view>
                <!-- <up-icon name="arrow-up"></up-icon>
              <text name="arrow-down"></text> 后续多个疾病需要做展开收起-->
              </view>
            </view>
            <view class="card">
              <view class="interpretation">
                <view class="left">
                  <text class="border"></text>
                  <text class="name">解读</text>
                </view>
                <view class="right" @tap="introduce(item.brief)">
                  <text class="check-text">查看疾病介绍</text>
                  <text type="" class="iconfont icon-zhankaijiantou1 img"></text>
                </view>
              </view>
              <text class="interpretationContent" style="display: inline-block" decode>
                {{ item.summary }}
              </text>
            </view>
            <view class="card">
              <view class="interpretation">
                <view class="left">
                  <text class="border"></text>
                  <text class="name">您的风险因素</text>
                </view>
              </view>
              <!-- 风险因素  默认是低风险  middle是中风险 hight是高风险 -->
              <view
                :class="[
                  'interpretationContent',
                  'riskList',
                  'cf',
                  item.riskLevel == 'A'
                    ? 'confirm'
                    : item.riskLevel == 'B'
                    ? 'hight'
                    : item.riskLevel == 'C1'
                    ? 'middle'
                    : item.riskLevel == 'O'
                    ? 'low'
                    : ''
                ]"
              >
                <view v-for="(i, idx) of item.riskElements" :key="idx" class="riskitem">
                  {{ i }}
                </view>
              </view>
            </view>
            <view class="card">
              <view class="interpretation">
                <view class="left">
                  <text class="border"></text>
                  <text class="name">推荐的检验检查</text>
                </view>
              </view>
              <view class="interpretationContent riskList riskListCheck cf">
                <view v-for="(j, id) of item.suggestExamLists" :key="id" class="riskitem">
                  {{ j }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="interpretationContentTwo">
          <view class="nodate">暂无数据</view>
        </view>
        <view class="authenticationBtn" v-if="false">
          <view class="wraps">
            <view class="goAuthentication">查看我的健康处方</view>
          </view>
        </view>
      </view>
      <view class="tabActiveTwo" v-if="state.tabActive == 1">
        <view v-if="state.healthPrescription && state.healthPrescription.length > 0">
          <view class="cardOne" v-for="(item, index) in state.healthPrescription" :key="index">
            <view class="card" v-if="item && item.content">
              <view class="interpretation">
                <view class="left">
                  <text class="border"></text>
                  <text class="name">{{ item.title }}</text>
                </view>
              </view>
              <view class="interpretationContent">
                <text>{{ item.content ? item.content : '--' }}</text>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="interpretationContentTwo">
          <view class="nodate">暂无数据</view>
        </view>
      </view>
      <view class="tabActiveTwo tabActiveThree" v-if="state.tabActive == 2">
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border"></text>
              <text class="name">体征信息</text>
            </view>
            <view class="right record" @tap="healthInput(1)">
              <text class="check-text">记录</text>
              <text type="" class="iconfont icon-zhankaijiantou1 img"></text>
            </view>
          </view>
          <view class="informationWrap cf">
            <view class="item" @tap="healthInfo('height')">
              <view class="top">
                <text type="" class="iconfont icon-shengao1 img" style="color: #539dfe"></text>
                <text class="name">身高</text>
                <text class="date">{{
                  state.healthList && state.healthList.height && state.healthList.height.collectTime
                    ? transformTime(
                        new Date(state.healthList.height.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesTwo'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList && state.healthList.height && state.healthList.height.itemValue
                    ? Number(state.healthList.height.itemValue).toFixed(1)
                    : '-'
                }}</text>
                <text class="date">cm</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('weight')">
              <view class="top">
                <text type="" class="iconfont icon-tizhong1 img" style="color: #ffd666"></text>
                <text class="name">体重</text>
                <text class="date">{{
                  state.healthList && state.healthList.weight && state.healthList.weight.collectTime
                    ? transformTime(
                        new Date(state.healthList.weight.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesTwo'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList && state.healthList.weight && state.healthList.weight.itemValue
                    ? state.healthList.weight.itemValue
                    : '-'
                }}</text>
                <text class="date">kg</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('bmi')">
              <view class="top">
                <text type="" class="iconfont icon-BMI1 img" style="color: #4bddbe"></text>
                <text class="name">BMI</text>
                <text class="date">{{
                  state.healthList && state.healthList.bmi && state.healthList.bmi.collectTime
                    ? transformTime(
                        new Date(state.healthList.bmi.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesTwo'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList && state.healthList.bmi && state.healthList.bmi.itemValue
                    ? state.healthList.bmi.itemValue
                    : '-'
                }}</text>
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.bmi &&
                    state.healthList.bmi.normalFlag &&
                    (state.healthList.bmi.normalFlag == 'H' ||
                      state.healthList.bmi.normalFlag == 'H+')
                  "
                  class="trend"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <img
                  v-else-if="
                    state.healthList &&
                    state.healthList.bmi &&
                    state.healthList.bmi.normalFlag &&
                    state.healthList.bmi.normalFlag == 'L'
                  "
                  class="trend on"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <text class="date">kg/㎡</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('whr')">
              <view class="top">
                <text type="" class="iconfont icon-yaotunbi1 img" style="color: #857bff"></text>
                <text class="name">腰臀比</text>
                <text class="date">{{
                  state.healthList && state.healthList.whr && state.healthList.whr.collectTime
                    ? transformTime(
                        new Date(state.healthList.whr.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesTwo'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList && state.healthList.whr && state.healthList.whr.itemValue
                    ? state.healthList.whr.itemValue
                    : '-'
                }}</text>
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.whr &&
                    state.healthList.whr.normalFlag &&
                    (state.healthList.whr.normalFlag == 'H' ||
                      state.healthList.whr.normalFlag == 'H+')
                  "
                  class="trend"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.whr &&
                    state.healthList.whr.normalFlag &&
                    state.healthList.whr.normalFlag == 'L'
                  "
                  class="trend on"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
              </view>
            </view>
            <view class="item" @tap="healthInfo('sbp')">
              <view class="top">
                <text type="" class="iconfont icon-xieya1 img" style="color: #ffa654"></text>
                <text class="name">血压</text>
                <text class="date">{{
                  state.healthList && state.healthList.sbp && state.healthList.sbp.collectTime
                    ? transformTime(
                        new Date(state.healthList.sbp.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesTwo'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text
                  class="name"
                  v-if="
                    state.healthList &&
                    state.healthList.sbp &&
                    !state.healthList.sbp.itemValue &&
                    state.healthList.dbp &&
                    !state.healthList.dbp.itemValue
                  "
                >
                  -
                </text>
                <text
                  class="name"
                  v-if="state.healthList && state.healthList.sbp && state.healthList.sbp.itemValue"
                >
                  {{
                    state.healthList && state.healthList.sbp && state.healthList.sbp.itemValue
                      ? parseInt(state.healthList.sbp.itemValue)
                      : '-'
                  }}
                </text>
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.sbp &&
                    state.healthList.sbp.normalFlag &&
                    (state.healthList.sbp.normalFlag == 'H' ||
                      state.healthList.sbp.normalFlag == 'H+')
                  "
                  class="trend default"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.sbp &&
                    state.healthList.sbp.normalFlag &&
                    state.healthList.sbp.normalFlag == 'L'
                  "
                  class="trend default on"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <text
                  v-if="state.healthList && state.healthList.dbp && state.healthList.dbp.itemValue"
                  class="slash"
                  >/</text
                >
                <text
                  class="name"
                  v-if="state.healthList && state.healthList.dbp && state.healthList.dbp.itemValue"
                >
                  {{ parseInt(state.healthList.dbp.itemValue) }}
                </text>
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.dbp &&
                    state.healthList.dbp.normalFlag &&
                    (state.healthList.dbp.normalFlag == 'H' ||
                      state.healthList.dbp.normalFlag == 'H+')
                  "
                  class="trend default"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.dbp &&
                    state.healthList.dbp.normalFlag &&
                    state.healthList.dbp.normalFlag == 'L'
                  "
                  class="trend default on"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <text class="date">mmHg</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('heart_rate')">
              <view class="top">
                <text type="" class="iconfont icon-xinshuai1 img" style="color: #5383fe"></text>
                <text class="name">心率</text>
                <text class="date">{{
                  state.healthList &&
                  state.healthList.heartRate &&
                  state.healthList.heartRate.collectTime
                    ? transformTime(
                        new Date(
                          state.healthList.heartRate.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        'minutesTwo'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList &&
                  state.healthList.heartRate &&
                  state.healthList.heartRate.itemValue
                    ? parseInt(state.healthList.heartRate.itemValue)
                    : '-'
                }}</text>
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.heartRate &&
                    state.healthList.heartRate.normalFlag &&
                    (state.healthList.heartRate.normalFlag == 'H' ||
                      state.healthList.heartRate.normalFlag == 'H+')
                  "
                  class="trend"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.heartRate &&
                    state.healthList.heartRate.normalFlag &&
                    state.healthList.heartRate.normalFlag == 'L'
                  "
                  class="trend on"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <text class="date">次/分</text>
              </view>
            </view>
            <view
              class="item"
              @tap="healthInfo('fbg')"
              v-if="state.healthList && state.healthList.fbg"
            >
              <view class="top">
                <text type="" class="iconfont icon-xietang1 img" style="color: #ff746b"></text>
                <text class="name">血糖</text>
                <text class="meals">{{
                  state.healthList && state.healthList.fbg && state.healthList.fbg.itemValue
                    ? '空腹'
                    : ''
                }}</text>
                <text class="date">{{
                  state.healthList && state.healthList.fbg && state.healthList.fbg.collectTime
                    ? transformTime(
                        new Date(state.healthList.fbg.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesTwo'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList && state.healthList.fbg && state.healthList.fbg.itemValue
                    ? state.healthList.fbg.itemValue
                    : '-'
                }}</text>
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.fbg &&
                    state.healthList.fbg.normalFlag &&
                    (state.healthList.fbg.normalFlag == 'H' ||
                      state.healthList.fbg.normalFlag == 'H+')
                  "
                  class="trend"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.fbg &&
                    state.healthList.fbg.normalFlag &&
                    state.healthList.fbg.normalFlag == 'L'
                  "
                  class="trend on"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <text class="date">mmol/L</text>
              </view>
            </view>
            <view
              class="item"
              @tap="healthInfo('fbg')"
              v-if="state.healthList && state.healthList.pbg"
            >
              <view class="top">
                <text type="" class="iconfont icon-xietang1 img" style="color: #ff746b"></text>
                <text class="name">血糖</text>
                <text class="meals">{{
                  state.healthList && state.healthList.pbg && state.healthList.pbg.itemValue
                    ? '餐后'
                    : ''
                }}</text>
                <text class="date">{{
                  state.healthList && state.healthList.pbg && state.healthList.pbg.collectTime
                    ? transformTime(
                        new Date(state.healthList.pbg.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesTwo'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList && state.healthList.pbg && state.healthList.pbg.itemValue
                    ? state.healthList.pbg.itemValue
                    : '-'
                }}</text>
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.pbg &&
                    state.healthList.pbg.normalFlag &&
                    (state.healthList.pbg.normalFlag == 'H' ||
                      state.healthList.pbg.normalFlag == 'H+')
                  "
                  class="trend"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.pbg &&
                    state.healthList.pbg.normalFlag &&
                    state.healthList.pbg.normalFlag == 'L'
                  "
                  class="trend on"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <text class="date">mmol/L</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('spo2')">
              <view class="top">
                <text type="" class="iconfont icon-xieyang1 img" style="color: #41a4ff"></text>
                <text class="name">血氧</text>
                <text class="date">{{
                  state.healthList && state.healthList.spo2 && state.healthList.spo2.collectTime
                    ? transformTime(
                        new Date(state.healthList.spo2.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesTwo'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList && state.healthList.spo2 && state.healthList.spo2.itemValue
                    ? state.healthList.spo2.itemValue
                    : '-'
                }}</text>
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.spo2 &&
                    state.healthList.spo2.normalFlag &&
                    (state.healthList.spo2.normalFlag == 'H' ||
                      state.healthList.spo2.normalFlag == 'H+')
                  "
                  class="trend"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.spo2 &&
                    state.healthList.spo2.normalFlag &&
                    state.healthList.spo2.normalFlag == 'L'
                  "
                  class="trend on"
                  src="@/static/image/hmm/22.png"
                  alt=""
                />
                <text class="date">%</text>
              </view>
            </view>
          </view>
        </view>
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border"></text>
              <text class="name">今日运动</text>
            </view>
            <view class="right record" @tap="healthInput(2)">
              <text class="check-text">记录</text>
              <text type="" class="iconfont icon-zhankaijiantou1 img"></text>
            </view>
          </view>
          <view v-if="sports.list.length > 0" class="interpretationContentWrap">
            <view class="timeWrap">
              <view class="time">{{ state.today }}</view>
              <view class="right">
                <text class="name">总计</text>
                <text class="num">{{ sports.totalTime }}</text>
                <text class="name">分钟</text>
              </view>
            </view>
            <view class="interpretationContent riskList default cf motionList">
              <view v-for="(item, index) of sports.list" :key="index" class="riskitem">
                {{ item.sportName }}
              </view>
            </view>
          </view>
          <view v-else class="interpretationContent riskList default motionList">
            <view class="wraps nodate">暂无数据</view>
          </view>
        </view>
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border"></text>
              <text class="name">今日食谱</text>
            </view>
            <view class="right record" @tap="healthInput(3)">
              <text class="check-text">记录</text>
              <text type="" class="iconfont icon-zhankaijiantou1 img"></text>
            </view>
          </view>
          <view
            v-if="food.info.length == 0"
            class="interpretationContent riskList default recipeList"
          >
            <view class="wraps nodate">暂无数据</view>
          </view>
          <view v-else class="interpretationContentWrap">
            <view class="timeWrap recipe">
              <view class="time">{{ state.today }}</view>
              <view class="right">
                <text class="name">总计</text>
                <text class="num">{{ food.totalEnergy.toFixed(0) }}</text>
                <text class="name">千卡</text>
              </view>
            </view>
            <view
              v-for="(item, index) of food.info"
              :key="index"
              class="interpretationContent riskList default recipeList"
            >
              <view class="breakfast">
                <view class="title">{{ item.dietType }}</view>
                <view class="right">
                  <text class="num">{{ computeTotal(item.list).toFixed(0) }}</text>
                  <text class="unit">千卡</text>
                </view>
              </view>
              <view class="wraps cf">
                <view v-for="(i, idx) of item.list" :key="idx" class="riskitem">
                  {{ i.dietName }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border"></text>
              <text class="name">用药信息</text>
            </view>
            <view class="right record" @tap="healthInput(4)">
              <text class="check-text">记录</text>
              <text class="iconfont icon-zhankaijiantou1 img"></text>
            </view>
          </view>
          <view class="interpretationContent riskList default cf medicationList">
            <view
              class="wraps cf"
              v-if="state.medicationInformationList && state.medicationInformationList.length > 0"
            >
              <view
                class="riskitem"
                v-for="(item, index) in state.medicationInformationList"
                :key="index"
              >
                {{ item.drugName }}
              </view>
            </view>
            <view v-else class="wraps nodate">暂无数据</view>
          </view>
        </view>
        <view class="authenticationBtn" v-if="false">
          <view class="wraps">
            <view class="goAuthentication">查看我的健康处方</view>
          </view>
        </view>
      </view>
    </view>
    <up-popup :show="state.show" :closeable="true" :round="32" mode="bottom" @close="close">
      <view class="popup-wrap">
        <view class="title">疾病介绍</view>
        <text class="popupContent">
          {{ state.diseaseBrief }}
        </text>
        <view class="btn" @tap="close">知道了</view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { infoGet, drugInfoGet, healthInfoAll } from '@/api/hmm'
import { query_get_sport } from '@/api/sports'
import { query_get_food } from '@/api/food'
import { label_info } from '@/api/body'
import { formatDate } from '@/utils/util'
import { onShow } from '@dcloudio/uni-app'
import { transformTime } from '@/utils/hmm.ts'
// import { maskIdCard } from '@/static/js/checkMobile.js'
const state = reactive({
  today: formatDate(new Date(), 'yyyy-MM-dd'),
  tabActive: 0,
  show: false,
  estimateList: [],
  diseaseBrief: '',
  healthPrescription: [],
  medicationInformationList: [],
  healthList: {},
  userInfo: {}
})
const sports = reactive({
  totalTime: 0,
  list: []
})
const food = reactive({
  totalEnergy: 0,
  info: {}
})
const tabList = ref([
  {
    name: '健康评估'
  },
  {
    name: '健康处方'
  },
  {
    name: '健康数据'
  }
])
onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  getEstimate()
  // 健康数据获取
  getHealthData()
  drugInfoGetFun()
  healthInfoAllFun()
})

const getEstimate = () => {
  // 健康评估
  uni.showLoading({
    title: '加载中'
  })
  let param = state.userInfo.empi
  label_info(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0 && res.data.length > 0) {
      state.estimateList = res.data
      state.estimateList.forEach((item) => {
        item.riskElements = item.riskElements.split(',')
        item.summary = item.summary.replaceAll(' ', '&nbsp;')
      })
    }
  })
}
const getPrescription = () => {
  // 健康处方
  uni.showLoading({
    title: '加载中'
  })
  let param = state.userInfo.empi
  infoGet(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      state.healthPrescription =
        res.data && res.data.itemContent ? JSON.parse(res.data && res.data.itemContent) : []
    } else {
      state.healthPrescription = []
    }
  })
}
const drugInfoGetFun = () => {
  state.medicationInformationList = []
  let drugEmpi = state.userInfo.empi
  drugInfoGet(drugEmpi).then((res) => {
    if (res.code == 0) {
      if (res.data && res.data.length > 0) {
        state.medicationInformationList = res.data
      } else {
        state.medicationInformationList = []
      }
    }
  })
}
const healthInfoAllFun = () => {
  let param = state.userInfo.empi
  healthInfoAll(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      state.healthList = res.data
    } else {
      state.healthList = {}
    }
  })
}
const getHealthData = () => {
  // 健康数据
  let params = {
    empi: state.userInfo.empi,
    date: state.today
  }
  query_get_sport(params).then((res) => {
    // 运动信息
    sports.list = res.data
    sports.totalTime = 0
    sports.list.forEach((item) => {
      sports.totalTime += item.duration
    })
  })
  query_get_food(params).then((res) => {
    // 饮食信息
    food.info = res.data
    food.totalEnergy = 0
    res.data.forEach((i) => {
      food.totalEnergy += computeTotal(i.list)
    })
  })
}
const computeTotal = (arr: Array) => {
  // 计算热量
  let total = 0
  arr.forEach((item) => {
    total += (item.energy * item.amount) / 100
  })
  return total
}

const changeTab = (index) => {
  if (state.tabActive != index) {
    state.tabActive = index
    // 跳转tab触发事件
    if (index == 0) {
      getEstimate()
    } else if (index == 1) {
      getPrescription()
    } else if (index == 2) {
      getHealthData()
      drugInfoGetFun()
      healthInfoAllFun()
    }
  }
}
const introduce = (text: string) => {
  state.diseaseBrief = text
  state.show = true
}
const close = () => {
  state.show = false
}
const healthInput = (num) => {
  if (num == 1) {
    uni.navigateTo({
      url: '/pages/healthPortrait/healthData'
    })
  } else if (num == 2) {
    uni.navigateTo({
      url: '/pages/sportsInformation/index'
    })
  } else if (num == 3) {
    uni.navigateTo({
      url: '/pages/dailyFood/index'
    })
  } else {
    uni.navigateTo({
      url: '/pages/medication/index'
    })
  }
}
const healthInfo = (type) => {
  uni.navigateTo({
    url: '/pages/echartsInfo/index?type=' + type
  })
}
const moreFun = () => {
  uni.navigateTo({
    url: '/pages/moreMessage/index'
  })
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}
.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  content: '.';
  visibility: hidden;
}
.wrap {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 64rpx;
  .header {
    height: 520rpx;
    position: relative;
    text-align: center;
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      background: linear-gradient(180deg, #ddf7fa 0%, #f3f7f8 100%);
    }
    .info {
      position: relative;
      z-index: 1;
      display: inline-block;
      width: calc(100% - 64rpx);
      text-align: left;
      margin: 32rpx 0;
      background: #fff;
      border-radius: 16rpx;
      padding: 48rpx 32rpx;
      box-sizing: border-box;
      box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(173, 211, 205, 0.33);
      .left {
        display: inline-block;
        vertical-align: top;
        width: 84rpx;
        height: 84rpx;
        margin-right: 20rpx;
      }
      .right {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 104rpx);
        .top {
          position: relative;
          .infos {
            font-size: 28rpx;
            color: #666;
            .name {
              font-size: 36rpx;
              color: #333;
              font-weight: 700;
              display: inline-block;
              vertical-align: middle;
            }
            .sex {
              display: inline-block;
              vertical-align: middle;
              margin: 0 20rpx;
            }
            .age {
              display: inline-block;
              vertical-align: middle;
            }
          }
          .more {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            background: rgba(0, 209, 182, 0.05);
            border-radius: 24rpx;
            height: 48rpx;
            line-height: 48rpx;
            border: 1rpx solid #00d1b6;
            padding: 0 24rpx;
            display: flex;
            align-items: center;
            .more-text {
              font-size: 24rpx;
              color: #00d1b6;
              font-weight: 700;
              display: inline-block;
              vertical-align: middle;
            }
            .img {
              font-size: 28rpx;
              color: #00d1b6;
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
        .idCard {
          margin-top: 20rpx;
          border: 1rpx solid #e5e6eb;
          border-radius: 4rpx;
          padding: 4rpx 20rpx;
          font-size: 24rpx;
          color: #666;
          display: inline-block;
        }
        .border,
        .cardName,
        .num {
          display: inline-block;
          vertical-align: middle;
        }
        .border {
          width: 1rpx;
          height: 20rpx;
          background: #7d7d7d;
          margin: 0 10rpx;
        }
      }
    }
  }
  .content {
    position: relative;
    .tabWrap {
      position: relative;
      height: 100rpx;
      line-height: 100rpx;
      margin-top: -240rpx;

      .bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
      }
      .tab {
        position: relative;
        z-index: 1;
        .tabItem {
          float: left;
          width: 33.3%;
          position: relative;
          text-align: center;
          font-size: 32rpx;
          color: #222;
          height: 100rpx;
          line-height: 120rpx;
          .border {
            display: none;
          }
          &.on {
            line-height: 100rpx;
            color: #00d1b6;
            font-weight: 700;
            font-size: 36rpx;
            z-index: 11;
            .border {
              display: block;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 44rpx;
              height: 6rpx;
              background: #00d1b6;
            }
          }
        }
      }
    }
    .tabActiveOne {
      background: #fff;
      .cancerWrap {
        position: relative;
        display: inline-block;
        width: 100%;
        padding-top: 32rpx;
        .cancer {
          margin: 0 32rpx;
          background: linear-gradient(to right, #e7f8f2, #fffefd);
          border-radius: 12rpx;
          padding: 27rpx 24rpx;
          .bg {
            display: inline-block;
            vertical-align: middle;
            font-size: 40rpx;
            margin-right: 20rpx;
          }
          .cancerName {
            width: calc(100% - 100rpx);
            display: inline-block;
            vertical-align: middle;
            font-size: 36rpx;
            font-weight: 700;
            .name {
              color: #222;
            }
            .state {
              color: #0cb67c;
            }
          }
          ::v-deep .u-icon {
            display: inline-block;
          }
          &.middle {
            background: linear-gradient(to right, #fff2ec, #fffefd);
            .cancerName {
              .state {
                color: #ff813c;
              }
            }
          }
          &.hight {
            background: linear-gradient(to right, #ffeeec, #fffefd);
            .cancerName {
              .state {
                color: #ff503d;
              }
            }
          }
          &.low {
            background: linear-gradient(to right, #f0f4ff, #fdfeff);
            .cancerName {
              .state {
                color: #5c8eff;
              }
            }
          }
          &.confirm {
            background: linear-gradient(to right, #f0f0fd, #fefeff);
            .cancerName {
              .state {
                color: #615de9;
              }
            }
          }
        }
      }
    }
    .tabActiveTwo {
      background: #fff;
      &.tabActiveThree {
        padding-top: 32rpx;
        .card {
          &:nth-child(1) {
            margin: 0 32rpx !important;
          }
        }
      }
      .cardOne {
        .card {
          padding-top: 32rpx;
          &:nth-child(1) {
            margin: 0 32rpx !important;
          }
        }
      }
    }
    .interpretationContentTwo {
      display: block;
      margin: 0 32rpx;
      padding: 150rpx 0;
      text-align: center;
      font-size: 28rpx;
      color: #666;
    }
    .card {
      margin: 32rpx 32rpx 0;
      background: #fff;
      &:nth-of-type(1) {
        margin: 32rpx 32rpx 0;
      }
      .interpretation {
        position: relative;
        .left {
          .border {
            display: inline-block;
            vertical-align: middle;
            height: 32rpx;
            width: 8rpx;
            background: #00d1b6;
          }
          .name {
            display: inline-block;
            vertical-align: middle;
            margin-left: 16rpx;
            font-size: 32rpx;
            color: #222;
            font-weight: 700;
          }
        }
        .right {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          .check-text {
            display: inline-block;
            vertical-align: middle;
            font-size: 28rpx;
            color: #00d1b6;
          }
          .img {
            font-size: 32rpx;
            color: #00d1b6;
            display: inline-block;
            vertical-align: middle;
          }
          &.record {
            border: 1rpx solid #00d1b6;
            padding: 4rpx 14rpx 6rpx 20rpx;
            border-radius: 45rpx;
            .check-text {
              font-weight: 700;
              transform: translateY(-2rpx);
            }
          }
        }
      }
      .timeWrap {
        margin-top: 30rpx;
        font-size: 30rpx;
        color: #222;
        position: relative;
        .right {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          .num {
            font-size: 36rpx;
            color: #5c8eff;
            font-weight: 700;
            margin: 0 8rpx;
          }
        }
        &.recipe {
          .right {
            .num {
              color: #00d1b6;
            }
          }
        }
      }
      .interpretationContent {
        margin-top: 24rpx;
        font-size: 30rpx;
        color: #222;
        padding: 24rpx;
        background: #fafafa;
        border-radius: 12rpx;
        &.riskList {
          padding: 16rpx 24rpx 32rpx;
          .riskitem {
            float: left;
            color: #0cb67c;
            padding: 10rpx 24rpx;
            background: rgba(12, 182, 124, 0.1);
            border-radius: 8rpx;
            margin-right: 3%;
            margin-top: 16rpx;
          }
          &.riskListCheck {
            .riskitem {
              color: #5c8eff;
              border-color: rgba(92, 142, 255, 0.1);
              background: rgba(92, 142, 255, 0.1);
            }
          }
          &.middle {
            .riskitem {
              color: #ff813c;
              border-color: rgba(255, 129, 60, 0.1);
              background: rgba(255, 129, 60, 0.1);
            }
          }
          &.hight {
            .riskitem {
              color: #ff503d;
              border-color: rgba(255, 80, 61, 0.1);
              background: rgba(255, 80, 61, 0.1);
            }
          }
          &.low {
            .riskitem {
              color: #5c8eff;
              border-color: rgba(92, 142, 255, 0.1);
              background: rgba(92, 142, 255, 0.1);
            }
          }
          &.confirm {
            .riskitem {
              color: #615de9;
              border-color: rgba(97, 93, 233, 0.1);
              background: rgba(97, 93, 233, 0.1);
            }
          }
          &.default {
            .riskitem {
              color: #222;
              background: #fff;
              border: 1rpx solid #e5e6eb;
            }
          }
          &.motionList {
            border: 1rpx solid #b5ccff;
            background: linear-gradient(to bottom, #f7f9ff, #fff);
            .riskitem {
              background: #5c8eff;
              border-color: #5c8eff;
              color: #fff;
            }
            .wraps {
              &.nodate {
                height: 100rpx;
                line-height: 100rpx;
                text-align: center;
                font-size: 28rpx;
                margin-top: 16rpx;
                color: #666;
              }
            }
          }
          &.recipeList {
            border: 1rpx solid #8fe6db;
            background: linear-gradient(to bottom, #f1fffd, #fff);
            .breakfast {
              position: relative;
              font-size: 30rpx;
              font-weight: 700;
              padding-top: 14rpx;
              color: #222;
              .right {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
                .num {
                  font-size: 36rpx;
                  color: #00d1b6;
                  margin-right: 8rpx;
                }
                .unit {
                  font-weight: 400;
                }
              }
            }
            .wraps {
              margin-top: 8rpx;
              .riskitem {
                background: #00d1b6;
                border-color: #00d1b6;
                color: #fff;
              }
              &.nodate {
                height: 100rpx;
                line-height: 100rpx;
                text-align: center;
                font-size: 28rpx;
                margin-top: 16rpx;
                color: #666;
              }
            }
          }
          &.medicationList {
            border: 1rpx solid #b2b5ff;
            background: linear-gradient(to bottom, #f9f7ff, #fff);
            .wraps {
              margin-top: 8rpx;
              .riskitem {
                background: #6a70ff;
                border-color: #6a70ff;
                color: #fff;
              }
              &.nodate {
                height: 100rpx;
                line-height: 100rpx;
                text-align: center;
                font-size: 28rpx;
                margin-top: 16rpx;
                color: #666;
              }
            }
          }
        }
      }
      .informationWrap {
        .item {
          float: left;
          width: calc(50% - 14rpx);
          background: #fafafa;
          padding: 24rpx;
          border-radius: 16rpx;
          margin-top: 24rpx;
          box-sizing: border-box;
          border: 1rpx solid #e5e6eb;
          &:nth-child(2n + 1) {
            margin-right: 22rpx;
          }
          .top {
            position: relative;
            color: #999;
            font-size: 24rpx;
            .img {
              display: inline-block;
              vertical-align: middle;
              font-size: 56rpx;
              margin-right: 16rpx;
            }
            .name {
              display: inline-block;
              vertical-align: middle;
              font-size: 32rpx;
              color: #222;
              font-weight: 700;
            }
            .meals {
              display: inline-block;
              vertical-align: middle;
              color: #666;
              margin-left: 10rpx;
            }
            .date {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
            }
          }
          .min {
            margin-top: 24rpx;
            position: relative;
            .name {
              display: inline-block;
              vertical-align: middle;
              font-size: 40rpx;
              font-weight: 700;
              color: #222;
            }
            .slash {
              display: inline-block;
              vertical-align: middle;
              margin: 0 5rpx;
            }
            .trend {
              display: inline-block;
              vertical-align: middle;
              width: 18rpx;
              height: 18rpx;
              margin: 10rpx;
              &.on {
                transform: rotate(-180deg);
              }
              &.default {
                margin: 0;
              }
            }
            .date {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              color: #999;
              font-size: 24rpx;
            }
          }
        }
      }
    }
    .authenticationBtn {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 3;
      background: #fff;
      .wraps {
        padding: 0 32rpx;
        padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
        padding-top: 24rpx;
        text-align: center;
        font-size: 32rpx;
        border-top: 1px solid #e5e6eb;
        color: #666;
        .goAuthentication {
          width: 100%;
          display: inline-block;
          vertical-align: middle;
          border: 1rpx solid #00d1b6;
          height: 88rpx;
          line-height: 88rpx;
          border-radius: 44rpx;
          background: #00d1b6;
          color: #fff;
        }
      }
    }
  }
  ::v-deep .u-popup {
    .popup-wrap {
      //   padding-bottom: calc(rpx + constant(safe-area-inset-bottom));
      //   padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
      padding-bottom: 24rpx;
      padding-bottom: 24rpx;
      .title {
        padding: 32rpx 32rpx;
        text-align: center;
        font-weight: 700;
        font-size: 32rpx;
        border-bottom: 1px solid #e5e6eb;
      }
      .popupContent {
        display: inline-block;
        padding: 32rpx;
        font-weight: 400;
        font-size: 30rpx;
        color: #222222;
        line-height: 54rpx;
        text-align: justify;
        max-height: 756rpx;
        overflow: auto;
      }
      .btn {
        margin: 32rpx 32rpx 0;
        background: #00d1b6;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
        color: #fff;
        font-size: 32rpx;
        font-weight: 700;
        text-align: center;
      }
    }
    .u-popup__content__close {
      top: 40rpx;
      .uicon-close {
        font-size: 32rpx !important;
        line-height: 32rpx !important;
      }
    }
  }
}
</style>
